前言

今天的目標中，我將試著實現篩選功能，該功能為僅顯示已標記的待辦項目。我會先添加一個篩選的選項，然後設定選到「已被標記的待辦事項」時，就將未被標記的待辦事項隱藏。

新增篩選器

HTML

首先，我需要在 HTML 檔案的 <header> 區塊中新增一個篩選器。以下為相關程式碼：

<header>
  <button id="openSidebarButton" class="button-group">></button>
  <h1>ThemeTasker</h1>
  <div class="filter-options">
    <label for="filter" id="filterLabel">篩選</label>
    <select id="filter">
      <option value="all">所有待辦事項</option>
      <option value="completed">已標記的待辦事項</option>
    </select>
  </div>
</header>

CSS

接著，我會到 _common-style.scss 檔案中添加樣式。以下為相關程式碼：

div.filter-options {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 30%;
    left: 82%;

select#filter {
    display: none;
}

select#filter.show {
    display: block;
}

之所以會有 select#filter.show 是因為我之後會在 JavaScript 中操作，當我點擊 <label> 元素後，會為<select> 區塊添加 show 類別，已將它顯示在網頁上。

JavaScript

接著，我需要初始化要操作的 HTML 元素，這些元素包括篩選選項的容器、標籤以及下拉選單。以下為我的相關程式碼：

this.filterOptions = document.querySelector(".filter-options");
this.filterLabel = document.querySelector("#filterLabel");
this.filterSelect = document.querySelector("#filter");

再來，為了實現篩選的功能，我需要綁定事件監聽器，當我改變選擇時，我將執行不同的程式碼。以下為相關程式碼：

setupFilterOption() {
    this.filterSelect.addEventListener("change", () => {
        const selectedOption = this.filterSelect.value;

        if (selectedOption === "completed") {
            this.filterCompletedItems();
        } else {
            this.showAllItems();
        }
    });
}